/*
 * @Author: Yuelei 
 * @Date: 2018-03-19 15:30:25 
 * @Last Modified by: Yuelei
 * @Last Modified time: 2018-03-21 21:16:59
 */
import React    from 'react';
import { Link ,NavLink} from 'react-router-dom';

class NavSide extends React.Component{
    constructor(props){
        super(props);
    }
    render (){
        return (
            <div className="navbar-default navbar-side" >
            <div className="sidebar-collapse">
                <ul className="nav" >
                {/* 首页 */}
                    <li>
                        {/* 利用NavLink判断是否为当前指定路径来进行操作 */}
                        <NavLink exact activeClassName="active-menu" to="/">
                         <i className="fa fa-edit"></i> 
                         <span>首页</span> 
                        </NavLink>
                    </li>
 

                    <li className="active">
                        <Link to='/product'>
                         <i className="fa fa-list"></i> 
                        <span>商品管理</span>
                         <span className="fa arrow"></span>
                        </Link>
                        <ul className="nav nav-second-level collapse in">
                            <li>
                                <NavLink to='/product' activeClassName="active-menu">商品管理</NavLink>
                            </li>
                            <li>
                                <NavLink to='/product-category' activeClassName="active-menu">品类管理</NavLink>
                            </li>
                        </ul>
                    </li>
                    
                      {/* 订单管理 */}
                    <li className="active">
                        <Link to='/order'>
                         <i className="fa fa-check-square-o"></i> 
                        <span>订单</span>
                         <span className="fa arrow"></span>
                        </Link>
                        <ul className="nav nav-second-level collapse in">
                            <li>
                                <NavLink to='/order' activeClassName="active-menu">订单管理</NavLink>
                            </li>
                        </ul>
                    </li>
                    {/* 用户管理 */}
                    <li className="active">
                        <Link to='/user'>
                         <i className="fa fa-user-o"></i> 
                        <span>用户</span>
                         <span className="fa arrow"></span>
                        </Link>
                        <ul className="nav nav-second-level collapse in">
                            <li>
                                <NavLink to='/user' activeClassName="active-menu">用户管理</NavLink>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>

        </div>
        );
    }
}

export default NavSide;